<section class="section" id="personal_project">
    <h2 class="title-thin text-muted">个人作品</h2>
    <div class="pf-wrap">
        <div class="pf-grid">

        <div class="pf-grid-sizer"></div><!-- used for sizing -->

        <div class="pf-grid-item design">
            <div class="project">
                <figure class="portfolio-figure">
                    <img src="{{ '/styles/img/portfolio/heimashow.jpg' | prepend: site.baseurl }}" alt="">
                </figure>

                <div class="portfolio-caption text-center">
                    <div class="valign-table">
                        <div class="valign-cell">
                            <h2 class="text-upper">头条APP</h2>
                            <p>基于Vue与axios的前端设计</p>
                            <a href="https://gitee.com/JueyanGuaibai/my-study" class="pf-btn-view btn btn-primary" target="_blank" width="200px">详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pf-grid-item design">
            <div class="project">
                <figure class="portfolio-figure">
                    <img src="{{ '/styles/img/portfolio/newmanshow.jpg' | prepend: site.baseurl }}" alt="">
                </figure>

                <div class="portfolio-caption text-center">
                    <div class="valign-table">
                        <div class="valign-cell">
                            <h2 class="text-upper">纽曼官网</h2>
                            <p>基于HTML、CSS、JS的静态页面与轮播图设计</p>
                            <a href="https://gitee.com/JueyanGuaibai/newnan-study" class="pf-btn-view btn btn-primary" target="_blank">详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pf-grid-item design">
            <div class="project">
                <figure class="portfolio-figure">
                    <img src="{{ '/styles/img/portfolio/message.jpg' | prepend: site.baseurl }}" alt="">
                </figure>

                <div class="portfolio-caption text-center">
                    <div class="valign-table">
                        <div class="valign-cell">
                            <h2 class="text-upper">个人简历</h2>
                            <p>基于git与jekyll的网页设计</p>
                            <a href=" http://jueyanguaibai.gitee.io/strange-bos-blog" class="pf-btn-view btn btn-primary" target="_blank">详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pf-grid-item design">
            <div class="project">
                <figure class="portfolio-figure">
                    <img src="{{ '/styles/img/portfolio/router-admin.jpg' | prepend: site.baseurl }}" alt="">
                </figure>

                <div class="portfolio-caption text-center">
                    <div class="valign-table">
                        <div class="valign-cell">
                            <h2 class="text-upper">后台管理简单设计</h2>
                            <p>基于vue路由的简单设计</p>
                            <a href="https://gitee.com/JueyanGuaibai/router-admin" class="pf-btn-view btn btn-primary" target="_blank">详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section><!-- .section -->